<template>
    <div class="transform">
        <el-row>
          <el-col :span="24" style="color:gray; text-align:center;"> <span>Hello 这里有一些格式化相关内容和案例如下</span> </el-col>
        </el-row>
        <div class="content">
            <!-- 时间转换 -->
            <el-row>
                <el-col :md="6">
                    <div class="tft">
                        <h4>时间获取：<el-button type="success" size="mini" style="margin-left:15px;" @click="getNowTime()">获取</el-button></h4>
                        <span style="font-size:14px;">获取当前时间：{{time.timeNow}}</span>
                        <h4 style="margin-top:30px;">格式化：</h4>
                        <span>请输入时间戳：<el-input v-model="time.timeStamp" placeholder="请输入时间戳(数字)" size="mini" style="width:150px;"></el-input></span>
                        <span>
                            选择时间格式：
                            <el-select v-model="time.format" placeholder="请选择格式" size="mini" style="width:150px;">
                              <el-option  v-for="item in time.formatArr" :label="item.name" :value="item.value" :key="item"></el-option>
                            </el-select>
                            <el-button type="success" size="mini" style="margin-left:8px;" @click="transformTm(0)">转换</el-button>
                        </span>
                        <span style="font-size:12px; margin-left: 3px;" :class="{'err': time.err1}">{{time.tips1}}{{time.formatTime}}</span>
                        <span v-show="!time.err1" style="font-size:12px; margin-left: 3px;" :class="{'err': time.err1}"> 文字形式：{{time.formatTimeText}}</span>
                    </div>
                </el-col>
                <el-col :md="4" style="padding: 0 12px; box-sizing:border-box;">
                    <!-- 金钱格式化 -->
                    <div class="tft">
                        <h4>格式化金额：</h4>
                        <span style="margin-top: 15px;">
                            <el-input v-model="money.value" placeholder="请输入金额" size="mini" style="width:150px;"></el-input>
                            <el-button type="success" size="mini" style="margin-left:8px;" @click="transformMn()">转换</el-button>
                        </span>
                        <span style="font-size:12px; margin-left: 3px;" :class="{'err': money.err2}">{{money.tips}}{{money.fmValue}}</span>
                    </div>
                </el-col>
                <el-col :md="14" style="padding: 0 12px; box-sizing:border-box;">
                    <h4>正则大全：</h4>
                    数字：^[0-9]*$ <br>
                    n位的数字：^\d{n}$ <br>
                    至少n位的数字：^\d{n,}$ <br>
                    m-n位的数字：^\d{m,n}$<br>
                    零和非零开头的数字：^(0|[1-9][0-9]*)$<br>
                    非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$<br>
                    带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$<br>
                    正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$<br>
                    有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$<br>
                    有1~3位小数的正实数：^[0-9]+(\.[0-9]{1,3})?$<br>
                    非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$<br>
                    非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$<br>
                    非负整数：^\d+$ 或 ^[1-9]\d*|0$<br>
                    非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$<br>
                    非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$<br>
                    非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$<br>
                    正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$<br>
                    负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$<br>
                    浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$<br>
                    <hr>
                    汉字：^[\u4e00-\u9fa5]{0,}$<br>
                    英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$<br>
                    长度为3-20的所有字符：^.{3,20}$<br>
                    由26个英文字母组成的字符串：^[A-Za-z]+$<br>
                    由26个大写英文字母组成的字符串：^[A-Z]+$<br>
                    由26个小写英文字母组成的字符串：^[a-z]+$<br>
                    由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$<br>
                    由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$<br>
                    中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$<br>
                    中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$<br>
                    可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+<br>
                    禁止输入含有~的字符：[^~\x22]+<br>
                    <hr>
                    Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$<br>
                    域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?<br>
                    InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$<br>
                    手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$<br>
                    电话号码：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$<br>
                    国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}<br>
                    电话号码正则表达式: ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)<br>
                    身份证号(15位、18位数字)，最后一位是校验位，可能为数字或字符X：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)<br>
                    帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$<br>
                    密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$<br>
                    强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$<br>
                    强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$<br>
                    日期格式：^\d{4}-\d{1,2}-\d{1,2}<br>
                    一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$<br>
                    一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$<br>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'

export default {
    setup(){
        const { proxy } = getCurrentInstance()
        const time = reactive({
            tips1:'格式化后的时间：',
            timeNow: null,
            format:'yyyy年MM月dd日 HH点mm分ss秒',
            formatArr:[
                {
                    name:'yyyy-MM-dd',
                    value: 'yyyy-MM-dd'
                },
                {
                    name: 'yyyy-MM-dd HH:mm',
                    value: 'yyyy-MM-dd HH:mm'
                },
                {
                    name: 'yyyy-MM-dd HH:mm:ss',
                    value: 'yyyy-MM-dd HH:mm:ss'
                },
                {
                    name: '年月日',
                    value: 'yyyy年MM月dd日'
                },
                {
                    name: '时分秒',
                    value: 'HH点mm分ss秒'
                },
                {
                    name: '年月日时分秒',
                    value: 'yyyy年MM月dd日 HH点mm分ss秒' 
                }
            ],
            err1: false,
            timeStamp: +new Date,
            formatTime: null,
            formatTimeText: null
        })
        const money = reactive({
            value:'',
            fmValue:'',
            tips:'格式化后的金额：',
            err2: false
        })
        onMounted(() => {
            transformTm(0, time.format)
        })

        const getNowTime = () => {
            time.timeNow = proxy.$time.getDate()
        }

        const transformTm = (type) => {
            let regx = /^[0-9]*$/
            switch(type){
                case 0:
                    if(!regx.test(time.timeStamp) || time.timeStamp==''){
                        time.tips1 = '只支持输入数字！！！'
                        time.formatTime = null,
                        time.formatTimeText = null
                        time.err1 = true
                        return
                    }else{
                        time.tips1 = '格式化后的时间：'
                        time.err1 = false
                        let ntime = parseInt(time.timeStamp)
                        time.formatTime = proxy.$time.toDate(ntime, time.format)
                        time.formatTimeText = proxy.$time.toDateText(ntime)
                    }
                    break
            }
        }

        const transformMn = () => {
            //金钱正则
            let regx = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9](0-9)?$)/
            if(!regx.test(money.value)){
                money.tips = '请输入正确的金额！！！'
                money.err2 = true
            }else{
                money.tips = '格式化后的金额：'
                money.err2 = false
                money.fmValue = proxy.$money(money.value)
                
            }
        }
        

        return{
            time,
            getNowTime,
            transformTm,
            money,
            transformMn
        }
    }
}
</script>

<style scoped>
    .transform{
        font-size: 14px;
        color: rgb(66, 63, 63);
    }
    .tft{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .tft span{
        margin: 8px 0;
    }
    .err{
        color: red;
        text-decoration-line: underline;
    }
    .el-col{
        border-right: 1px solid rgb(240, 229, 229);
    }
</style>